<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Flat UI Widget</title>
</head>
<body>
	<div class="container">
	    <div class="head">
	        <h1>Brian D. Dog</h1>
	        Friend of Man
	    </div>
	    <div class="body">
	      <a href="#"><span class="entypo-twitter"></span></a><a href="#"><span class="entypo-facebook"></span></a><a href="#"><span class="entypo-dribbble"></span></a><a href="#"><span class="entypo-gplus"></span></a>
	    </div>
	  <div class="foot">
	    <a href="#" class="footItem1"><span class="entypo-heart"></span>102</a><a href="#" class="footItem2"><span class="entypo-user"></span>4,587</a><a href="#" class="footItem3"><span class="entypo-plus"></span>84,023</a>
	  </div>
	</div>
</body>
<style>
	@import url(http://weloveiconfonts.com/api/?family=entypo);

	[class*="entypo-"]:before {
	  font-family: 'entypo', sans-serif;
	}

	*  { box-sizing: border-box; }

	body { margin: 100px; font-family: helvetica, sans-serif; background: #eaedf1; font-size: 10px; }

	a { text-decoration: none; transition: all .4s; }

	.container { width: 360px; margin: 0 auto; }
	  /* open body on :hover */
	  .container:hover .body { height: 70px; }

	/* the HEAD stuffs */
	.head { overflow: auto; padding: 20px; background: #fff; border-radius: 5px 5px 0 0; font-size: 1.2em; color: #b9becd; }
	  .head:before { content: ""; display: block; float: left; width: 80px; height: 80px; margin-right: 20px; background: url("http://img0.etsystatic.com/000/0/6525182/il_570xN.345773300.jpg") no-repeat; background-size: 80px; border-radius: 100%; }
	  .head h1 { margin: 15px 0 5px; font-weight: 100; font-size: 2.2em; color: #5e6d81; }


	/* the BODY stuffs */
	.body { height: 0; background: #323a45; color: #fff; vertical-align: middle; transition: all .3s; }
	.body a { display: inline-block; width: 25%; height: 100%; padding: 20px; border-right: 1px solid rgba(255,255,255,.25); text-align: center; color: #fff; font-size: 2.5em}
	  .body a:hover { background: #515761; }
	    .body a:last-child { border-right: none; }


	/*.bodyOpen { height: auto; }*/

	/* the FOOT stuffs */
	.foot { /*height: 100px;*/ }

	[class^="footItem"] { display: inline-block; width: 33.333333%; padding: 15px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 1.1em; }
	[class^="footItem"] span { display: block; font-size: 1.6em; margin-bottom: 5px; color: #fff; }
	  .footItem1 { background: #14b9d6; border-radius: 0 0 0 5px; }
	    .footItem1:hover { background: #5bcee2; }
	  .footItem2 { background: #f27935; }
	    .footItem2:hover { background: #f6a172; }
	  .footItem3 { background: #1fbba6; border-radius: 0 0 5px 0; }
	    .footItem3:hover { background: #63d0c1; }
</style>
</html>